import React, {FC, useContext} from 'react';
import "./index.less";
import {useBackendEnum} from "kf-web-library";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {Empty, Spin} from "antd";
import HxPagination from "@/components/HxPagination";
import EsSearchFilterPart from "@/pages/SearchPage/common/EsSearchFilters/EsSearchFilterPart";
import EsSearchFilters from '../common/EsSearchFilters';
import {AppstoreOutlined, BookOutlined, FieldTimeOutlined, FolderOutlined} from "@ant-design/icons";
import SearchMediaItem from "@/pages/SearchPage/common/SearchMediaItem";
import queryString from "query-string";
import {SearchPageContext} from "@/pages/SearchPage/common/SearchPageContext";
import {FormattedMessage} from "umi";
import usePgSearch from "@/pages/SearchPage/common/usePgSearch";

interface SearchChartProps {
}

/**
 * 图表ES检索 页面
 */
const SearchChart: FC<SearchChartProps> = (props) => {
  const {currentSearch} = usePgSearch()
  const {enumDict, enumTypeDict, getBackendEnum} = useBackendEnum();

  const dataReq = useRequest((p) => {
    return API.queryFrontArticleChartsByEs({
      ...p,
      ...currentSearch,
    });
  }, {
    refreshDeps: [currentSearch],
  });
  const records = dataReq.data?.data || [];
  const aggs = dataReq.data?.extras?.aggs;

  return (
    <div className={"search-chart-container search-result-page"}>
      {
        records.length === 0 && (
          <Empty/>
        )
      }
      <div className={"search-result-page-content"}>
        {
          !!aggs && (
            <div className={"search-record-filters"}>
              <EsSearchFilters>
                <EsSearchFilterPart fieldName={"articleTypes"}
                                    title={<FormattedMessage id="search.article.filter.articleTypes"/>}
                                    icon={<FolderOutlined/>}
                                    options={aggs?.typeAggs || []}/>
                <EsSearchFilterPart fieldName={"adviseTypes"}
                                    title={<FormattedMessage id="search.article.filter.adviseTypes"/>}
                                    icon={<AppstoreOutlined/>}
                                    options={(aggs?.adviseTypeAggs || []).map((agg: any) => {
                                      return {...agg, displayName: getBackendEnum("ArticleAdviseType", agg.key)?.i18EnumDesc}
                                    })}
                />
                <EsSearchFilterPart fieldName={"journalNameCns"}
                                    title={<FormattedMessage id="search.article.filter.journalNames"/>}
                                    icon={<BookOutlined/>}
                                    options={aggs?.journalCnAggs || []}/>
                <EsSearchFilterPart fieldName={"publicationYears"}
                                    title={<FormattedMessage id="search.article.filter.publicationYears"/>}
                                    icon={<FieldTimeOutlined/>}
                                    options={aggs?.publishedYearAggs || []}/>
              </EsSearchFilters>
            </div>
          )
        }
        <div className={"search-record-list"}>

          <Spin spinning={dataReq.loading}>
            <div className={"search-record-inner-list"}>
              {
                records.length > 0 && (
                  records.map((item, index) => (
                    <SearchMediaItem type={"chart"} target={"_blank"} record={item} key={item.figureTableId || item.videoId}/>
                  ))
                )
              }
            </div>
            {
              dataReq.data && (
                <div className={"hx-pagination-wrapper"}>
                  <HxPagination size="default"
                                total={dataReq.data?.total}
                                current={dataReq.data.current}
                                pageSize={dataReq.data.pageSize}
                                onChange={(pageNum, pageSize) => {
                                  dataReq.run({
                                    page: pageNum,
                                    pageSize
                                  })
                                }}
                  />
                </div>
              )
            }
          </Spin>
        </div>
      </div>
    </div>
  );
};

export default SearchChart;
